<template>
	<view>
		<view class="header">
			<view class="search-box" @click="searchArea">
				<u-search placeholder="请输入关键字 " :showAction="false" v-model="search"></u-search>
			</view>
			<view class="header-content">
				<view :class="state == index ? 'content-title' : ''" v-for="(item,index) in titleData" :key="index" @click="changeStyle(index)">{{item.title}}</view>
				<u-icon name="grid" size="28"></u-icon>
			</view>
		</view>
		<view class="main">
			<view class="commodity" v-for="item in mainData" :key="item.id" @click="productDetails">
				<image :src="item.src" class="commodity-image" mode=""></image>
				<view class="commodity-name">{{item.name}}</view>
				<view class="price">
					<view class="right-price">￥{{item.price}}</view>
					<view class="discount">￥{{item.discount}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: 0,
				// 综合、价格、销量
				titleData:[
					{ title:'综合' },
					{ title:'价格' },
					{ title:'销量' },
				],
				// 商品数据
				mainData:[
					{ id:1, src:'/static/logo.png',name:'玉石02', price:'0.01',discount:'0.01' },
					{ id:2, src:'/static/logo.png',name:'玉石02', price:'0.01',discount:'0.01' },
				]
			}
		},
		methods: {
			// 分类标题点击
			changeStyle(index){
				this.state = index
			},
			// 顶部搜索框跳转搜索页面
			searchArea(){
				uni.navigateTo({
					url:'/pages/index/searchArea/searchArea'
				})
			},
			// 点击商品跳转商品详情页面
			productDetails(){
				uni.navigateTo({
					url:'/pages/index/productDetails/productDetails'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search-box{
		padding: 20rpx;
	}
	.header-content{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 40rpx 0 40rpx;
	}
	.content-title{
		color: red;
	}
	.main{
		height: 1200rpx;
		background-color: #F6F6F6;
		padding: 20rpx 0rpx 20rpx 20rpx;
		display: flex;
	}
	.commodity{
		width: 350rpx;
		height: 490rpx;
		background-color: #fff;
		margin-right: 20rpx;
		border-radius: 40rpx;
	}
	.commodity-image{
		width: 350rpx;
		height: 380rpx;
	}
	.commodity-name{
		margin-left: 10rpx;
		font-size: 40rpx;
	}
	.price{
		display: flex;
		align-items: center;
	}
	.right-price{
		color: red;
	}
	.discount{
		color: #999999;
		text-decoration: line-through;
	}
</style>

